import React, { Component } from 'react';
import { Layout, Menu } from 'antd';
import styles from './Accounts.scss';

class Accounts extends Component {
  AccountClassifyItemRender = (data, level, pcode) => {
    const { SubMenu } = Menu;
    return data
      .filter(item => item.accLevel === level && item.code.substr(0, pcode.length) === pcode)
      .map((item) => {
        const children = data.filter((itemC) => {
          return (
            itemC.accLevel === level + 1 && itemC.code.substr(0, item.code.length) === item.code
          );
        });
        return children.length !== 0 ? (
          <SubMenu
            key={item.code}
            title={
              item.accLevel === 1 ? (
                <span>{item.name}</span>
              ) : (
                <a href={`/Accounts/${item.code}`}>
                  <span>{item.name}</span>
                </a>
              )
            }
          >
            {this.AccountClassifyItemRender(data, level + 1, item.code)}
          </SubMenu>
        ) : (
          <Menu.Item key={item.code}>
            <a href={`/Accounts/${item.code}`}>
              <span>{item.name}</span>
            </a>
          </Menu.Item>
        );
      });
  };

  render = () => {
    const { Content, Sider } = Layout;
    const { data, children } = this.props;
    const code = window.location.pathname.split('/')[2];
    return (
      <Content>
        <Layout style={{ padding: '24px 0', background: '#fff' }}>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={[code]}
              defaultOpenKeys={['ACC004']}
              style={{ height: '100%' }}
            >
              {this.AccountClassifyItemRender(data, 1, 'ACC')}
            </Menu>
          </Sider>
          <Content style={{ padding: '0 24px', minHeight: 280 }}>{children}</Content>
        </Layout>
      </Content>
    );
  };
}
export default Accounts;
